<template>
	<view class="flex_ZC">
		<!-- <uNavbar :title="title" :bgColor="bgColor"> </uNavbar> -->
		<!-- <image class="sj_bg" :src="baseUrl + '/static/commonimg/bgimg2.png'" mode="aspectFill"></image> -->
		<view class="back flex_c">
			<image class="backimg" :src="baseUrl + '/static/icon/left_jt.png'" mode="aspectFill" @click="goBack">
			</image>
		</view>
		<!-- 轮播 -->
		<view class="brand_island">
			<swiper class="swiper" circular interval="3000" duration="500" autoplay>
				<swiper-item v-for="item in info.detail_images" :key="item.id">
					<view class="swiper_box flex_c" @click="changeUrl">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="content-container flex_ZC" :class="{ moved: isMoved }" @touchstart="handleTouchStart"
			@touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="homepage">
				<view class="mart42 f36 fw5 c3">{{info.name}}</view>
				<view class="mart20 flex_dq"  @click="gostore">
					<image  class="tagimage" :src="info.attach.seller_level.name_image" mode="widthFix"></image>
					<image class="rateimg" v-for="item in info.attach.seller_level.level_data.image_data"  :src="item" mode="aspectFill"></image>
					<!-- <u-rate readonly size="18" v-model="info.evaluate_rate" active-color="#FFC300"></u-rate> -->
					<view class=" flex_dq" v-if="info.is_marketing">
						<image class="manzeng" :src="baseUrl + '/static/image/manz2.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="bwrap">
					<view class="bwrapitem">
						<view class="num">
							{{info.attach_total}}
						</view>
						<view class="txt">
							粉丝
						</view>
					</view>
					<view class="bwrapitem">
						<view class="num">
							{{info.sales_volume}}
						</view>
						<view class="txt">
							销量
						</view>
					</view>
					<view class="bwrapitem" style="border: none;">
						<view class="num">
							{{info.video_count}}
						</view>
						<view class="txt">
							作品
						</view>
					</view>
				</view>
				<view class="tab-nav">
					<view class="tab-list-item"@click="goDetail">
						<image
							src="https://images.fudiemall.com/storage/default/20250716/yyzzcd53d24e19187d5c90b8402cc2734c288114be66.png"
							mode="aspectFill"></image>
						<view class="text">
							营业执照
						</view>

					</view>
					<view class="tab-list-item" @click="godown">
						<image
							src="https://images.fudiemall.com/storage/default/20250716/zuopinc317266069abe6cb03a912bac1e621ef0c450e22.png"
							mode="aspectFill"></image>
						<view class="text">
							{{info.video_count}}个作品
						</view>
					
					</view>
					<view class="tab-list-item" @click="godown">
						<image
							src="https://images.fudiemall.com/storage/default/20250716/dianzanedfed376eabbee3378cfe3ef84327cd1fc02cce9.png"
							mode="aspectFill"></image>
						<view class="text">
							{{info.video_like_total}}点赞
						</view>
					
					</view>
					<view class="tab-list-item" >
						<image
							src="https://images.fudiemall.com/storage/default/20250716/pingjia767a9af33eb9f96eb8df968f50b9fff32d59ac0f.png"
							mode="aspectFill"></image>
						<view class="text">
							{{info.comment}}评价
						</view>
					
					</view>
				</view>
				<!-- <scroll-view class="small" scroll-x="true" :show-scrollbar="false">
					<view class="small_box flex_dq" v-for="(item,index) in 10" :key="index">
						<image :src="baseUrl+ '/static/image/sjd.png'" mode="aspectFill"></image>
						<text class="f24 c6">营业执照</text>
					</view>
				</scroll-view> -->
				<view class="business linb flex_ld">
					<view class="business_l flex_Z">
						<text class="f26 c3 fw7">{{info.business_status_text}}</text>
						<view class="f24 c9 mart14 flex_dq">
							<text>营业时间: </text>
							<text v-for="(item,index) in info.business_hours" :key="index">
								{{item.start}}至{{item.end}}</text>
						</view>
					</view>
					<view class=" flex_c" @click="goDetail">
						<text class="f24 c9">商家详情</text>
						<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
					</view>
				</view>
				<view class="navigation flex_ld">
					<view class="navigation_l flex_Z">
						<text class="f26 c3 overflow2 ">{{info.full_address}}{{info.address}}</text>
						<text class="f24 c9">距您{{info.distances||"999"}}km</text>
					</view>
					<view class="navigation_r flex_ld_b">
						<view class="navigation_r_box flex_ZC" @click="openLocation">
							<image :src="baseUrl +'/static/icon/i_dh.png'" mode="aspectFill"></image>
							<text>导航</text>
						</view>
						<view class="navigation_r_box flex_ZC" @click="callPhone">
							<image :src="baseUrl +'/static/icon/tel.png'" mode="aspectFill"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
			<view class="gift flex_Z" v-if="giftList.length>0">
				<view class="gift_box flex_ld">
					<image class="gift2" :src="baseUrl + '/static/image/gift2.png'" mode="aspectFill"></image>
					<image class="gift1" :src="baseUrl + '/static/image/gift1.png'" mode="aspectFill"></image>
				</view>
				<view class="benefit flex_ZC">
					<view class="benefit_box flex_ld" v-for="(item,index) in giftList" :key="index">
						<text class="benefit_tip" v-if="item.user_type == 1">新粉福利</text>
						<text class="benefit_tip" v-if="item.user_type == 2">老粉福利</text>
						<text class="benefit_tip" v-if="item.user_type == 3">大众福利</text>
						<view class="ben_text flex_dq">
							<text v-if="item.user_type == 1">新粉</text>
							<text v-if="item.user_type == 2">老粉</text>
							<text>到店消费享受满{{item.min_total_price}}赠{{item.gift_price}}More劵活动</text>
						</view>
					</view>
				</view>
			</view>
			<view class="groupBuying flex_Z">
				<view class=" flex_ld">
					<view class="groud_top flex_dq">
						<text :class="inx == index? 'active':''" v-for="(item,index) in list1" :key="index"
							@click="changeTaggle(index,item)">{{item}}</text>
					</view>
					<view class=" flex_dq" v-if="selname ==  '店铺评价'" @click="goReviews">
						<text class="f24 c9">查看全部</text>
						<u-icon name="arrow-right" color="#999999" size="13"></u-icon>
					</view>
				</view>
				<view v-if="selname ==  '增值服务' ||selname=='优惠团购'">
					<view class="groupList flex_dq" v-for="(item,index) in goodsList" :key="item.id"
						@click="goGroupDetail(item.id)">
						<view class="groupList_l">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="groupList_r flex_Z">
							<text class=" f28 c3 fw5">{{item.name}}</text>
							<view class=" flex_dq">
								<view class="groupList_r_deta flex_Z">
									<view class="dss flex_dq" v-if="selname=='优惠团购'">
										<text class="ddzf" v-for="(item1,index) in item.label_lists"
											:key="index">{{item1}}</text>
									</view>
									<view class="dss flex_dq" v-if="selname ==  '增值服务' ">
										<text class="ddzf"
											style="color: #FFC300;border: 1rpx solid #FFC300;">仅限增值服务劵支付</text> <text
											class="ddzf">自动生效</text>
									</view>
									<view class=" flex_dq">
										<text class="f24 c4">￥</text>
										<text class="f36 c4">{{item.price}}</text>
										<text v-if="item.is_ticket == 0"
											class="jifen">+{{item.integral_proportion}}%More值</text>
										<text v-if="item.is_ticket == 1" class="jifen">+{{item.price}}More值</text>
									</view>
								</view>
								<view class="flex_ZC">
									<text class="f24 c9">已售{{item.sales_init+item.sales_real}}+</text>
									<text class="sale">抢购</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<noDatas v-if="selname ==  '增值服务' ||selname=='优惠团购'" :xxxList="goodsList" :status="status"></noDatas>
				<view v-if="selname ==  '店铺评价'">
					<view v-if="evaluateInfo.length>0">
						<view class="evaluate flex_Z" v-for="(item1,index) in evaluateInfo" :key="index">
							<view class=" flex_ld">
								<view class="evaluate_top flex_dq">
									<image :src="item1.user_avatar" mode="aspectFill">
									</image>
									<text class="f26 c3">{{item1.user_name}}</text>
								</view>
								<view class="score">
									<u-rate activeColor="#FFC300" readonly v-model="item1.score"></u-rate>
								</view>
							</view>
							<view class="mart14">
								<text class="f24 c3 overflow2">{{item1.content}}</text>
								<view>
									<view class="contents_img flex_dq">
										<image v-for="(item2,index2) in item1.images" :key="index2" :src="item2.img"
											mode="aspectFill" @click="previewImg(item1.images)"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="evaluate flex_dq" v-else>
						<text class="f28 c9">暂无评论~</text>
					</view>
				</view>

				<view v-if="inx == 2">

				</view>
			</view>
		</view>

		<view class="empty2"></view>
		<view class="btn_function flex_c">
			<text class="share" @click="shareflag=true">分享</text>
			<text class="quick" v-if="info.quick_pay=='1'" @click="goQuick">快捷买单</text>
		</view>
		<u-popup :show="shareflag" mode="bottom" @close="shareflag=false" :safeAreaInsetBottom="false" :closeable="true"
			bgColor="transparent" :closeOnClickOverlay="false">
			<view class="sharewrap">
				<view class="shareitem" @click="copyCurrentPagePath">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/lianjie05d677a617d5cae918b1e8e456dc3f53231a46c6.png"
						mode="aspectFill"></image>
					<text>复制链接</text>
				</view>
				<view class="shareitem" v-if="!iswxflag"
					@click="hbflag=true,shareflag=false,canvasDraw(info,qrcodeimg)">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/fenxianghaibao998f386470e2bc1bae873632b1d6a65088c0d571.png"
						mode="aspectFill"></image>
					<text>分享海报</text>
				</view>
				<view class="shareitem" v-if="iswxflag" @click="shareToWechat">
					<image
						src="https://images.fudiemall.com/storage/default/20250423/wx9be87cb35b101c40f077a2c04ea9deaa8478182c.png"
						mode="aspectFill"></image>
					<text>分享到微信</text>
				</view>
				<view class="shareitem" @click="gosharelist">
					<image
						src="https://images.fudiemall.com/storage/default/20250522/groupchat8347f23f96f5df3c93e9b39b84ec236f0685722e.png"
						mode="aspectFill"></image>
					<text>分享到群聊</text>
				</view>
				<!-- #ifdef MP-ALIPAY -->
				<view class="shareitem">
					<image :src="baseUrl+ '/static/image/shareapliay.png'" mode="aspectFill"></image>
					<text>分享到支付宝</text>
					<button open-type="share" class="sharebtn"></button>
				</view>
				<!-- #endif -->

			</view>
		</u-popup>
		<u-popup :show="hbflag" mode="center" @close="hbflag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="hbwraps">
				<canvas style="width: 690rpx; height: 708rpx;margin: 0 auto;" canvas-id="inviteCanvas"
					id="inviteCanvas"></canvas>
				<view class="btn" @click="save1">
					保存图片
				</view>
			</view>

		</u-popup>
		
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">请前往福叠猫App</text>
				<view class="prompt_ntm flex_ld_a">
					<text @click="tipShow = false">再想想</text>
					<text @click="gonext()">现在去</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// #ifdef H5 || MP-WEIXIN
	import wx from 'weixin-js-sdk';
	// #endif

	import {
		myuser
	} from "../../api/user.js"
	import {
		geocoder
	} from "../../api/other.js"
	import {
		detail,
		goodlist,
		evaluate
	} from "../../api/local.js"
	import {
		qrcode,
		wxConfig
	} from "../../api/other.js"
	import {
		envflag
	} from '../../utils/request.js';
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				bgColor: 'transparent',
				title: '商家详情',
				inx: 0,
				value: 3,
				list1: ["增值服务", '优惠团购', '店铺评价', ],
				evaluateInfo: [null, null],
				id: "",
				info: {},
				goodsList: [],
				giftList: [],
				page: 1,
				size: 50,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				shareflag: false,
				hbflag: false,
				user: {},
				fullPath: "",
				ishaveurl: false,
				iswxflag: false,
				qrcodeimg: "",
				types: "",
				isMoved: false, // 控制移动状态
				touchStartY: 0, // 触摸起始位置
				currentY: 0, // 当前触摸位置
				dragging: false, // 是否正在拖拽
				selname: "",
				tipShow:false
			}
		},

		onLoad(e) {

			// navigation 跳转携带参数或者扫描支付宝小程序自身的分享
			if (e.id) {
				this.id = e.id
			}
			// 关联二维码携带的参数
			if (uni.getStorageSync("quick_payparam")) {
				this.id = uni.getStorageSync("quick_payparam")
			}
			// 扫描小程序自身分享的小程序码， 关联二维码携带的邀请码在app.vue中已经保存过了
			if (e.invite_code) {
				uni.setStorageSync('inviteCode', e.invite_code)
						if (uni.getStorageSync("seller_id")) {
										uni.removeStorageSync("seller_id")
									}
				
			}
			if (!uni.getStorageSync("token")) {
				// 没有登录保存跳转的url和参数，去重新登录
				uni.setStorageSync("quick_pay", `/pagesMy/groundCat/merchantHomepagew?id=${this.id}`)
				uni.showToast({
					title: "未授权认证，请登录",
					icon: "none"
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pageLogin/login/login'
					})
					uni.hideToast()
				}, 1000)
			} else {
				// 删除保存的url路径和参数
				uni.removeStorageSync("quick_payparam")
				uni.removeStorageSync("quick_pay")
			}
			return
			// 支付宝小程序扫码进入onload获取不到e
			// if (e) {
			// 	if (e.invite_code) {
			// 		this.ishaveurl = true
			// 		uni.setStorageSync('inviteCode', e.invite_code)
			// 	}
			// 	this.id = e.id
			// 	if (!uni.getStorageSync("token")) {
			// 		uni.setStorageSync("quick_pay", `/pagesMy/groundCat/merchantHomepagew?id=${this.id}`)
			// 		uni.showToast({
			// 			title: "未授权认证，请登录",
			// 			icon: "none"
			// 		})
			// 		setTimeout(() => {
			// 			uni.redirectTo({
			// 				url: '/pageLogin/login/login'
			// 			})
			// 			uni.hideToast()
			// 		}, 1000)
			// 	} else {
			// 		uni.removeStorageSync("quick_pay")
			// 	}
			// }
		},
		onShareAppMessage(res) {
			return {
				title: "福叠猫",
				path: "/pagesMy/groundCat/merchantHomepagew?id=" + this.id + "&invite_code=" + this.user.invite_code,
				imageUrl: this.info.cover,
				desc: "福叠猫是本地生活圈的综合消费平台"
			}
		},
		onShow() {
			// 支付宝小程序扫码跳转
			// // #ifdef MP-ALIPAY
			// const options = my.getLaunchOptionsSync();
			// if (options.query) {
			// 	// 获取二维码完整链接
			// 	let qrCode = options.query.qrCode
			// 	let page = qrCode.split('?')[1].split('&')[0]
			// 	let inviteCode = qrCode.split('?')[1].split('&')[1]
			// 	this.id = page.split('=')[1]
			// 	if (inviteCode) {
			// 		this.ishaveurl = true
			// 		uni.setStorageSync('inviteCode', inviteCode.split('=')[1])
			// 	}

			// 	if (!uni.getStorageSync("token")) {
			// 		uni.setStorageSync("quick_pay", `/pagesMy/groundCat/merchantHomepagew?id=${page.split('=')[1]}`)
			// 		uni.showToast({
			// 			title: "未授权认证，请登录",
			// 			icon:"none"
			// 		})
			// 		setTimeout(() => {
			// 			uni.redirectTo({
			// 				url: '/pageLogin/login/login'
			// 			})
			// 			uni.hideToast()
			// 		}, 1000)
			// 	} else {
			// 		uni.removeStorageSync("quick_pay")
			// 	}
			// }
			// // #endif
			setTimeout(() => {
				if (uni.getStorageSync("token")) {
					this.getuser()
					this.sss()

					this.getpjlist()
					this.getqrcode()
					this.getEnv()
				}
			}, 500)

		},
		methods: {
			gonext(){

				this.tipShow=false
				uni.navigateTo({
					url:"/pageUser/download/download"
				})
			},
			godown(){
				// #ifdef H5
					this.tipShow=true
				// #endif
				// #ifdef  MP-WEIXIN || MP-ALIPAY
				uni.$u.toast("请前往福叠猫App")
				// #endif
			},
			gostore(){
				uni.navigateTo({
					url:"/pagesMy/groundCat/storerating?id="+this.id
				})
			},
				
			

			//获取页面栈的长度
			goBack() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			changeUrl() {
				this.isMoved = !this.isMoved
			},
			// 触摸开始
			handleTouchStart(e) {
				this.touchStartY = e.touches[0].clientY;
				this.dragging = true;
			},

			// 触摸移动
			handleTouchMove(e) {
				if (!this.dragging) return;
				this.currentY = e.touches[0].clientY;

				// 计算移动距离
				const deltaY = this.currentY - this.touchStartY;

				// 根据状态决定拖拽方向
				if (!this.isMoved && deltaY > 50) {
					// 向下拖拽超过阈值
					this.isMoved = true;
					this.dragging = false;
				} else if (this.isMoved && deltaY < -50) {
					// 向上拖拽超过阈值
					this.isMoved = false;
					this.dragging = false;
				}
			},

			// 触摸结束
			handleTouchEnd() {
				this.dragging = false;
			},
			gosharelist() {
				uni.navigateTo({
					url: "/pageDao/groupchat/sharelist?id=" + this.id + "&type=2"
				})
			},
			shareToWechat() {
				this.shareflag = false
				// 这里可以通过弹窗等方式引导用户点击微信右上角菜单进行分享
				uni.showModal({
					title: '分享提示',
					content: '请点击微信右上角菜单进行分享',
					showCancel: false
				});
			},
			getEnv() {
				let isfrom;
				// 小程序环境判断
				// #ifdef MP-WEIXIN
				try {
					const systemInfo = uni.getSystemInfoSync();
					console.log(systemInfo)
					if (systemInfo.platform === 'devtools') {
						isfrom = '浏览器开发者工具';
					} else if (systemInfo.app) {
						const app = systemInfo.app.toLowerCase();
						if (app.includes('alipay')) {
							isfrom = '支付宝小程序';
						} else if (app.includes('micromessenger')) {
							isfrom = '微信小程序';
						}
					}
				} catch (error) {
					// 如果 uni.getSystemInfoSync 报错，说明可能不是小程序环境
				}
				// #endif
				// #ifdef H5
				if (!isfrom) {
					const ua = navigator.userAgent.toLowerCase();
					if (ua.match(/Alipay/i)) {
						isfrom = '支付宝浏览器';
					} else if (ua.match(/MicroMessenger/i)) {
						isfrom = '微信内置浏览器';
						this.iswxflag = true
					} else {
						isfrom = '普通浏览器';
					}
				}
				// #endif

				// H5环境判断


				// 跳转逻辑
				if (isfrom === "微信小程序" || isfrom === "微信内置浏览器") {
					// 这里可以添加微信相关的跳转逻辑
				} else {

				}
				return isfrom;
			},
			setShareConfig() {
				// 分享到朋友圈
				wx.updateTimelineShareData({
					title: this.info.name,
					link: this.fullPath,
					imgUrl: this.info.cover,
					desc: '福叠猫地猫商家主页', // 分享描述
					success() {
						console.log('分享到朋友圈成功');
					},
					cancel() {
						console.log('取消分享到朋友圈');
					}
				});

				// 分享给好友
				wx.updateAppMessageShareData({
					title: this.info.name,
					link: this.fullPath,
					imgUrl: this.info.cover,
					desc: '福叠猫地猫商家主页', // 分享描述
					success() {
						console.log('分享给好友成功');
					},
					cancel() {
						console.log('取消分享给好友');
					}
				});
			},
			getwxconfig() {
				wxConfig({
					id: this.id,
					type: 4
				}).then(res => {
					wx.config({
						debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData'
						] // 必填，需要使用的 JS 接口列表
					});
					wx.ready(() => {
						this.setShareConfig()
						console.log("准备好了")
					});
				})
			},
			getqrcode() {
				qrcode({
					id: this.id,
					type: 4
				}).then(res => {
					this.qrcodeimg = res.data
				})
			},
			copyCurrentPagePath() {
				uni.setClipboardData({
					data: this.fullPath,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
				// 复制路径到剪贴板

			},
			saveImageToPhone(imageUrl) {
				// 创建一个新的 Image 对象
				const img = new Image();
				img.crossOrigin = 'anonymous'; // 允许跨域
				img.src = imageUrl;
				console.log(img, "sssss")
				img.onload = () => {
					// 创建一个 canvas 元素
					const canvas = document.createElement('canvas');
					const ctx = canvas.getContext('2d');

					// 设置 canvas 的宽度和高度与图片一致
					canvas.width = img.width;
					canvas.height = img.height;

					// 在 canvas 上绘制图片
					ctx.drawImage(img, 0, 0);

					// 将 canvas 内容转为图片 URL
					const dataURL = canvas.toDataURL('image/png');

					// 创建一个 a 标签
					const a = document.createElement('a');
					a.href = dataURL;
					a.download = 'image.png'; // 设置下载的文件名为 image.png

					// 模拟点击 a 标签，触发下载
					document.body.appendChild(a);
					a.click();
					document.body.removeChild(a);
				};
			},
			save1() {
				var that = this
				console.log(123456);
				uni.canvasToTempFilePath({
					canvasId: 'inviteCanvas',
					success: function(res) {
						// #ifdef H5
						that.saveImageToPhone(res.tempFilePath)
						// #endif




					},
					fail(reg) {
						console.log(reg);
					}
				})
			},
			getuser() {
				var that = this
				myuser().then(res => {
					that.user = res.data
					console.log(that.user, "sdasdd")
					if (envflag) {
						this.fullPath =
							`https://h5.fudiemall.com/#/pagesMy/groundCat/merchantHomepagew?id=${this.id}&invite_code=${this.user.invite_code}`
					} else {
						this.fullPath =
							`https://h5-test.fudiemall.com/#/pagesMy/groundCat/merchantHomepagew?id=${this.id}&invite_code=${this.user.invite_code}`
					}

					console.log("走了")
				})
			},

			async canvasDraw(data, qrcodeimg) {
				var ctx = uni.createCanvasContext('inviteCanvas', this)
				const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
				const rpxToPx = screenWidth / 750; // 计算 rpx 转 px 比例
				// 绘制圆角矩形路径（参数：x, y, width, height, 圆角半径）
				ctx.clearRect(0, 0, 690 * rpxToPx, 708 * rpxToPx);
				let avatarUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: data.cover ||
							"https://images.fudiemall.com/storage/default/20250422/Q7axiJ420qRjZYfb247de39baf0adba9a88e8a2e57cb4daa2ec7e06.png",
						success: function(image) {
							console.log(image, "获取头像信息")
							resove(image.path)
						}
					});
				})
				let codeUrl = await new Promise((resove, reject) => {
					uni.getImageInfo({
						src: qrcodeimg,
						success: function(image) {
							console.log(image, "获取图片信息")
							resove(image.path)
						}
					});
				})
				const x = 0,
					y = 0,
					width = 690 * rpxToPx,
					height = 708 * rpxToPx,
					radius = 12;
				ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); // 左上角
				ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2); // 右上角
				ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5); // 右下角
				ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI); //左下角
				// 设置填充颜色（支持 HEX、RGB、RGBA）
				ctx.setFillStyle('#ffffff');
				// 填充路径
				ctx.fill();

				const srcX = 32 * rpxToPx, //左上角x坐标
					srcY = 32 * rpxToPx, //左上角y坐标
					srcWidth = 628 * rpxToPx, //图片宽度
					srcHeight = 392 * rpxToPx; //图片高度
				ctx.drawImage(avatarUrl, srcX, srcY, srcWidth, srcHeight)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(40 * rpxToPx)
				const nickname = data.name,
					nicknameX = 32 * rpxToPx, //左上角x坐标
					nicknameY = 478 * rpxToPx; //左上角y坐标
				ctx.fillText(nickname, nicknameX, nicknameY)
				ctx.setFillStyle('#666666');
				ctx.setFontSize(24 * rpxToPx)
				const address = data.full_address + data.address,
					addressX = 32 * rpxToPx, //左上角x坐标
					addressY = 540 * rpxToPx; //左上角y坐标

				// 处理 address 换行
				const maxLength = 18;
				const lines = [];
				for (let i = 0; i < address.length; i += maxLength) {
					lines.push(address.slice(i, i + maxLength));
				}
				if (lines.length > 2) {
					lines.length = 2;
					lines[1] = lines[1].slice(0, -3) + '...';
				}
				// 逐行绘制 address
				lines.forEach((line, index) => {
					ctx.fillText(line, addressX, addressY + index * 30 * rpxToPx);
				});
				const addressLastY = addressY + (lines.length - 1) * 30 * rpxToPx;

				ctx.setFillStyle('#666666');
				ctx.setFontSize(24 * rpxToPx)
				let text = '';
				// 遍历 business_hours 数组
				data.business_hours.forEach((item, index) => {
					if (index > 0) {
						// 如果不是第一个元素，添加换行符
						text += '\n';
					}
					// 拼接营业时间文本
					text += `营业时间：  ${item.start} - ${item.end}`;
				});
				// 将拼接好的文本赋值给 businessHoursText

				const time = text,
					timeX = 32 * rpxToPx, //左上角x坐标
					timeY = addressLastY + 30 + 30 * rpxToPx; // 根据 address 高度确定起始 y 坐标
				ctx.fillText(time, timeX, timeY)
				const srcX1 = 520 * rpxToPx,
					srcY1 = 518 * rpxToPx,
					srcWidth1 = 120 * rpxToPx,
					srcHeight1 = 120 * rpxToPx;
				ctx.drawImage(codeUrl, srcX1, srcY1, srcWidth1, srcHeight1)
				ctx.setFillStyle('#333333');
				ctx.setFontSize(24 * rpxToPx)
				const tips = "扫一扫",
					tipsX = 548 * rpxToPx, //左上角x坐标
					tipsY = 668 * rpxToPx; // 根据 address 高度确定起始 y 坐标
				ctx.fillText(tips, tipsX, tipsY)
				// 执行绘制
				setTimeout(() => {
					ctx.draw();
				}, 1000)
			},
			openimg() {

				uni.previewImage({
					urls: this.info.detail_images,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			getpjlist() {
				evaluate({
					seller_id: this.id,
					page: 1,
					page_size: 10,
					type: "all",
					sort_field: "create_time",
					sort_by: 'desc',
				}).then(res => {
					this.evaluateInfo = res.data.list.data
				})
			},

			getlist() {
				// uni.showToast({
				// 	title: '加载中',
				// 	icon: 'loading'
				// });
				let data = {
					seller_id: this.id,
					page: this.page,
					size: this.size,
					type: this.types,
					mask: 1
				};
				goodlist(data).then(res => {
					// uni.hideToast();
					console.log('商品列表', res)
					let list = res.data.data;

					this.goodsList = this.page == 1 ? list : this.goodsList.concat(list);
					console.log(this.goodsList);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})

			},
			getdetail() {
				detail({
						id: this.id,
						latitude: uni.getStorageSync("latitude"),
						longitude: uni.getStorageSync("longitude")
					})
					.then(async (res) => {
						console.log(111, res);
						this.info = res.data;

						if (this.info.is_voucher == 0) {
							this.list1 = ['优惠团购', '店铺评价', ],
								this.types = 1;
							this.selname = "优惠团购"
						} else {
							this.types = 6;
							this.selname = "增值服务"
						}

						await this.getlist();
						this.giftList = res.data.marketing_list;

						// #ifdef H5
						this.getwxconfig();
						// #endif
					})
					.catch(error => {
						console.error("获取详情失败:", error);
					});
			},
			sss() {
				let that = this;
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				uni.getLocation({

					success: function(res) {
						uni.setStorageSync("latitude", res.latitude)
						uni.setStorageSync("longitude", res.longitude)
						// that.latitude=res.latitude
						// that.longitude=res.longitude
						// that.page=1
						that.getdetail()
						console.log(res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let data = {
							lat: res.latitude,
							lng: res.longitude,
						};
						geocoder(data).then(res => {
							uni.hideLoading()
							console.log('逆解析', res)
							if (res.code == 1) {
								that.cityName = res.data.city
								console.log(that.cityName);
								uni.setStorageSync('addressInfo', res.data)
							}
						})
					},
					fail: function(res) {
						// this.obtainAddress()
						// that.page=1
						that.getdetail()
						console.log(res, "杀杀杀杀杀杀杀杀杀")
					}
				})
			},
			// 切换
			changeTaggle(index, item) {
				console.log(index);
				this.inx = index
				this.selname = item
				if (this.selname == '增值服务') {
					this.types = 6
				}
				if (this.selname == "优惠团购") {
					this.types = 1
				}
				this.page = 1
				this.getlist()
			},
			// 商家详情
			goDetail() {
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantDetails?id=' + this.id
				})
			},
			// 团购详情
			goGroupDetail(id) {
				console.log(1111);
				uni.navigateTo({
					url: '/pagesMy/groundCat/groupBuyingDetails?id=' + id
				})
			},
			// 查看全部
			goReviews() {
				uni.navigateTo({
					url: '/pagesMy/groundCat/buyerReviews2?id=' + this.id
				})
			},
			// 预览图片
			previewImg(res) {
				let imgAll = [];
				res.forEach((item) => {
					imgAll.push(item.img)
				})
				// console.log(imgAll);
				// 预览图片
				uni.previewImage({
					urls: imgAll,
					longPressActions: {
						success: function(data) {
							console.log(data);
						}
					}
				});
			},
			// 拨打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.phone
				});
			},
			openLocation() {
				// 测试先获取经纬度在导航

				const latitude = this.info.latitude;
				const longitude = this.info.longitude;
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					},
					fail: function(res) {
						console.log(res, '失败');
					},
				});


			},
			goQuick() {
				uni.navigateTo({
					url: '/pagesMy/groundCat/quickCheckout?id=' + this.id
				})
			}
		},
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop;
			if (scrollTop > 50) {
				this.bgColor = '#f7f7f7';
				this.title = '商家详情'
			} else {
				this.bgColor = 'transparent';
				this.title = ''
			}
		},
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped lang="scss">
	.sharebtn {
		width: 150rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
	}

	.zwf_box {
		width: 750rpx;
		height: 300rpx;
		/* background: pink; */
	}

	.brand_island {
		position: fixed;
		top: 0;
		width: 750rpx;
		margin: 0 auto;
	}

	.swiper {
		width: 750rpx;
		height: 500rpx;
	}

	.swiper_box {
		position: relative;
		width: 750rpx;
		height: 500rpx;
	}

	.swiper_box>image {
		width: 100%;
		height: 100%;
		z-index: 2;
		/* border-radius: 20rpx; */
	}

	.content-container {
		position: relative;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		transform: translateY(200rpx);
		transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
	}

	/* 添加拖拽手柄指示器 */
	.content-container::before {
		content: "";
		display: block;
		width: 120rpx;
		height: 8rpx;
		background: #ccc;
		border-radius: 4rpx;
		margin: 20rpx auto;
	}

	.content-container {
		/* 添加拖拽交互反馈 */
		user-select: none;
		/* 防止内容被选中 */
		touch-action: pan-y;
		/* 优化触摸滚动体验 */
	}

	.moved {
		transform: translateY(520rpx);
	}

	.btn {
		width: 690rpx;
		height: 76rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		margin-top: 30rpx;
	}

	.hbwraps {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 80rpx;
		/* background: #ffffff; */
		height: 800rpx;
	}

	.sj_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 386rpx;
		z-index: 2;
	}

	.sharewrap {
		width: 750rpx;
		height: 200rpx;
		background: #F7F7F7;
		display: flex;
		/* flex-wrap: wrap; */
		/* display: flex; */
	}

	.shareitem {
		width: 150rpx;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}

	.shareitem>text {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-top: 14rpx;
	}

	.shareitem>image {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
	}



	.homepage {
		width: 750rpx;
		padding: 0 24rpx;
		/* 		background: #ffffff;
		border-radius: 24rpx;
		z-index: 9;
		padding-bottom: 20rpx;
		overflow: hidden; */

	}

	.mart20 {
		margin-top: 20rpx;
	}

	.mart42 {
		margin-top: 42rpx;
	}

	.merchantImg {
		display: flex;
		width: 690rpx;
		margin: 30rpx auto;
		overflow: auto;
		padding-bottom: 30rpx;
	}

	.linb {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.goods_box>image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 16rpx;
	}

	.business {
		padding: 0 0 20rpx;
		margin-top: 28rpx;
	}

	.small {
		width: 100%;
		white-space: nowrap;
		/* 禁止换行 */
		margin-top: 28rpx;
	}

	.small_box {
		display: inline-block;
		/* 改为行内块元素 */
		padding: 6rpx 14rpx;
		background: #fff6d9;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.small_box>image {
		width: 22rpx;
		height: 24rpx;
		margin-right: 14rpx;
		vertical-align: middle;
		/* 图片垂直居中 */
	}

	.f24 {
		font-size: 24rpx;
	}

	.c6 {
		color: #666;
	}

	.mart14 {
		margin-top: 14rpx;
	}

	.navigation {
		padding-top: 20rpx;
	}

	.navigation_l {
		width: 70%;
	}

	.navigation_r {
		width: 30%;
	}

	.navigation_r_box>image {
		width: 46rpx;
		height: 46rpx;
	}

	.navigation_r_box>text {
		font-size: 22rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.gift {
		width: 690rpx;
		/* height: 536rpx; */
		background: linear-gradient(180deg, #FDF3D7 0%, #FDD98E 100%);
		border-radius: 24rpx;
		margin-top: 24rpx;
		padding: 24rpx 0;
	}

	.gift_box {
		margin: 8rpx 30rpx;
	}

	.gift2 {
		width: 412rpx;
		height: 108rpx;
	}

	.gift1 {
		width: 116rpx;
		height: 108rpx;
	}

	.benefit_box {
		position: relative;
		width: 622rpx;
		height: 58rpx;
		background: #FFF7E3;
		border-radius: 0rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		color: #333333;
		margin-top: 66rpx;
	}

	.ben_text {
		margin-left: 24rpx;
	}

	.benefit_tip {
		position: absolute;
		top: -42rpx;
		left: 0;
		width: 128rpx;
		height: 42rpx;
		line-height: 42rpx;
		background: #000000;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		font-size: 26rpx;
		text-align: center;
		color: #ffffff;
	}


	.groupBuying {
		width: 690rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin: 24rpx 0;
		padding: 0 24rpx;
	}

	.groud_top {
		margin: 28rpx 0;
	}

	.groud_top>text {
		width: 136rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 26rpx;
		color: #333333;
		background: #F7F7F7;
		border-radius: 10rpx;
		margin-right: 24rpx;
		border: 1rpx solid #F7F7F7;
	}

	.active {
		color: #FFC300 !important;
		border: 1rpx solid #FFC300 !important;
		font-weight: bold;
		background: #fffcf2;
	}

	.groupList {
		/* background: pink; */
		min-height: 200rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #efefef;
	}

	.groupList_l {
		width: 160rpx;
		height: 160rpx;
	}

	.groupList_l>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.groupList_r {
		width: 460rpx;
		margin-left: 20rpx;
	}

	.groupList_r_deta {
		width: 360rpx;
		margin: 10rpx 0;
	}

	.ddzf {
		padding: 5rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #7BACE3;
		border-radius: 8rpx;
		text-align: center;
		border: 1rpx solid #7BACE3;

		margin-right: 24rpx;
		margin-bottom: 10rpx;
	}

	.jifen {
		/* width: 120rpx; */
		/* height: 34rpx; */
		font-size: 24rpx;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-left: 20rpx;
		padding: 2rpx 10rpx;
	}

	.sale {
		width: 110rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: #FFC300;
		font-size: 30rpx;
		color: #ffffff;
		border-radius: 40rpx;
		margin-top: 16rpx;
	}

	.btn_function {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 112rpx;
		background: #ffffff;
		padding: 0 30rpx;
	}

	.share {
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.quick {
		width: 422rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #FFC300;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.manzeng {
		
		width: 280rpx;
		
		height: 36rpx;
		margin-left: 10rpx;
		/* margin-top: 12rpx; */
	}

	.evaluate {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.evaluate_top>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.score {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 200rpx;
		/* background: pink; */
	}

	.contents_img {
		display: flex;
		margin-top: 16rpx;

		/* display: block; */
	}

	.contents_img>image {
		width: 208rpx;
		height: 208rpx;
		display: block;
		border-radius: 12rpx;
		margin: 4rpx;
	}

	.dss {
		display: flex;
		flex-wrap: wrap;
	}

	.back {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 20rpx;
		width: 100%;
		height: 88rpx;
		z-index: 999;
	}

	.backimg {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
	}


	.bwrap {

		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.bwrapitem {
		width: 40%;
		border-right: 2rpx solid #f2f2f2;
		text-align: center;


	}

	.num {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}

	.txt {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}

	.tab-nav {
		// width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;
		flex-wrap: nowrap;
		overflow: auto;
		// z-index: 999;

		overflow-x: auto;
		/* 允许横向滚动 */
		overflow-y: hidden;
		/* 隐藏纵向滚动 */
		-webkit-overflow-scrolling: touch;
		/* 在iOS上实现平滑滚动 */
		white-space: nowrap;
		/* 防止子元素换行 */
		/* 隐藏滚动条（可选） */
		scrollbar-width: none;

		/* Firefox */
		&::-webkit-scrollbar {
			display: none;
			/* Chrome/Safari */
		}

		.tab-list-item {
			position: relative;
			min-width: 166rpx;
			height: 52rpx;
			background:#FFF6D9;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-right: 30rpx;

			/* 设置最小宽度防止内容挤压 */
			display: inline-flex;
			/* 改为行内flex布局 */
			flex-shrink: 0;
			/* 防止子项被压缩 */
			justify-content: center;
			align-items: center;

			.text {
			
				// padding: 10rpx;
				margin-left: 6rpx;
				opacity: 1;
				
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				z-index: 99;
				position: relative;
			}

			>image {
				width: 22rpx;
				height: 24rpx;
			}
		}
	}
		.prompt {
			width: 600rpx;
			background: #ffffff;
			margin: 0 auto;
			border-radius: 20rpx;
			padding-top: 10rpx;
			padding-bottom: 40rpx;
		}
		
		.prompt>text {
			margin-top: 40rpx;
		}
		
		.prompt_tit {
			margin: 0 30rpx;
			font-size: 28rpx;
			color: #666666;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.prompt_ntm {
			width: 100%;
			font-size: 30rpx;
			margin-top: 50rpx;
		}
		
		.prompt_ntm>text:nth-child(1) {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #F2F2F2;
			border-radius: 40rpx;
			color: #333333;
		}
		
		.prompt_ntm>text:nth-child(2) {
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 40rpx;
			color: #ffffff;
		}

	.rateimg{
		width: 30rpx;
		height: 30rpx;
		margin: 6rpx;
	}

				.tagimage{
					width: 126rpx;
					height: 40rpx;
				}
</style>